<template>
	<view class="gedan-container">
		<view v-if="!flag">
			<view @click="back">come back</view>
			<view class="playlist-title">
				<!-- <image :src="playListData.coverImgUrl" mode=""></image> -->
				<div class="xiex-image">
					<xiex-image :src="playListData.coverImgUrl" mode=""></xiex-image>
				</div>
				<p class = "description">{{playListData.description}}</p>
			</view>
			
			<view class="playlist-content">
				<view v-for="(item,index) in playListData.tracks" :key="item.id" @click="play(item)" class="playlist-content-item">				
					<view style="margin: auto; font-size: 28px;">+</view>
					<view class="content-left">
						<!-- <image :src="item.al.picUrl+'?params=50y50'" mode="scaleToFill" @load="handleLoad(item)" v-show="item.t"></image>
						<image src="../../static/logo.png" mode="scaleToFill"v-show="!item.t"></image> -->
						<div class="xiex-image">
							<xiex-image :src="item.al.picUrl+'?params=50y50'" :bgUrl="'static/bg.jpg'"></xiex-image>
						</div>
						<view>
							<h4 class="title">{{item.name}}</h4>
							<p class="author">{{item.ar[0].name}}</p>
						</view>
					</view>
					
				</view>
			</view>
			<!-- 底部点击弹出音乐界面 -->
			
		</view>
		<view :style="{height: viewHeight + 'px'}" class="music-play"  >
			<music-play @hide = "hidePlayView"></music-play>
		</view>
		<!-- <view v-if="flag" class="play-view" :style="{height:viewHeight+'px'}" ref="playView">
			<view @click = "hidePlayView">123</view>
		</view> -->
	</view>
</template>

<script>
	// import app from '../../App.vue'
	import musicPlay from '../../../components/musicPlay/musicPlay.vue'
	export default {
		data() {
			return {
				playListData: [],
				nowSong:{
					
				},
				viewHeight: 60,
				flag: false
			};
		},
		onLoad(options) {
			// console.log(this.$scope)
			// this.iac = app.globalData.iac
			this.getPlayList(options.resourceId);
			
			// console.log(document.documentElement.clientHeight);
		},
		components:{
			musicPlay
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			getPlayList(id){  
				uni.request({
					url: 'http://119.3.174.206:3000/playlist/detail?id='+id,
					success: (res) => {
						this.playListData = res.data.playlist
						console.log(this.playListData)
					}
				})
			},
			play(item){
				// console.log(item)
				uni.request({
							url: "http://119.3.174.206:3000/song/url?id=" + item.id,
							success: (res) => {
								console.log(res.data)
								if(!res.data.data[0].url)return uni.showToast({
									title: '暂时比较穷',
									icon: 'none'
								})
								this.nowSong.id = item.id
								this.nowSong.url = res.data.data[0].url
								this.nowSong.image = item.al.picUrl
								this.nowSong.playState = true
								this.nowSong.author = item.ar[0].name
								this.nowSong.title = item.name
								this.$store.commit('songChange', this.nowSong)
								this.iac.src = this.nowSong.url
								this.$play()
							}
				})
				
			},
			// 播放/暂停
			addPlayList(item){
				// console.log(data)
				let nextSong = {}
				nextSong.id = item.id
				nextSong.image = item.al.picUrl
				nextSong.author = item.ar[0].name
				nextSong.title = item.name
				nextSong.url = ''
				nextSong.lyric = ''
				this.$store.commit('nextPlayListChange',nextSong)
				console.log(this.$store.getters.nextPlayData)
			},
			handleLoad(item){
				item.t = 1
			},
			goMusicPlay(){
				console.log(this.$refs.playView);
			},
			hidePlayView(){
				this.flag = !this.flag;
				console.log(document.documentElement.clientHeight);
				if(this.flag) return this.viewHeight = document.documentElement.clientHeight;
				this.viewHeight = 60;
			}
		}
	}
</script>

<style lang="less" scoped>
	.gedan-container {
		position: relative;
		padding-bottom: 120rpx;
		height: 100%;
		// background-color: rgba(9,99,9,.5);
	}
	.playlist-title {
		display: flex;
		// justify-content: space-between;
		padding: 40rpx 30rpx;
		.xiex-image {
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
		 }
		.description {
			font-size: 24rpx;
			width: 470rpx;
			height: 202rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 6;
			-webkit-box-orient: vertical;
			
		}
	}
	.playlist-content {
		padding: 0 30rpx;
		
	}
	.playlist-content-item {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0;
		border-bottom: 1px solid #ccc;
		.number {
			line-height: 92rpx;
			width: 50rpx;
			// padding-right: 20rpx;
			box-sizing: border-box;
		}
		.content-left {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// image {width: 100rpx; height: 100rpx; border: .5rpx solid #eee; border-radius: 50%;}
			.xiex-image {
				
				overflow: hidden; 
				width: 100rpx; 
				height: 100rpx; 
				border: .5rpx solid #eee; 
				border-radius: 50%;}
			view {
				margin: 8rpx 0 0 20rpx; 
				width: 480rpx;
				.title {font-size: 20rpx;}
				.author {font-size: 16rpx;}
			}
			i {
				position: absolute;
				top: 35rpx;
				right: 40rpx;
			}
			
		}
	}
	.playlist-content-item:hover {
		i {
			animation: fail 3s linear;
		}
	}
	.music-play {
		position: fixed;
		bottom: 0;
		width: 100%;
		// height: 100%;
	}

	@keyframes fail {
		0% {
			
		}
		10% {
			top: -30rpx;
			right: 50rpx;
		}
		100% {
			top: 2000rpx;
			right: 200rpx;
		}
	}

</style>
